<template>
  <main class="ksd-settings">
    <n-form
        ref="formPwdRef"
        :rules="rules"
        :model="model"
        label-placement="left"
        label-width="auto">

      <h3>用户基础信息</h3>
      <n-form-item label="真实姓名:" path="realname">
        <n-input v-model:value.trim="model.realname" maxlength="20" placeholder="真实姓名"/>
      </n-form-item>
      <n-form-item label="联系手机:" path="telephone">
        <n-input v-model:value.trim="model.telephone" maxlength="11" placeholder="联系手机"/>
      </n-form-item>
      <n-form-item label="身份证号码:" path="idcard">
        <n-input v-model:value.trim="model.idcard" maxlength="20" placeholder="身份证号码"/>
      </n-form-item>
      <n-form-item label="身份证正面:" path="idcard1">
        <ksd-uploader v-model="model.idcardimgf" :data="{'path':'idcard','oldname':model.idcard1}"
                      override></ksd-uploader>
      </n-form-item>
      <n-form-item label="身份证反面:" path="idcard2">
        <ksd-uploader v-model="model.idcardimgc" :data="{'path':'idcard','oldname':model.idcard}"
                      override></ksd-uploader>
      </n-form-item>
      <h3>第三方支付</h3>
      <n-form-item label="支付宝账号:" path="alipaycode">
        <n-input v-model:value.trim="model.alipaycode" maxlength="100" placeholder="确认密码"/>
      </n-form-item>
      <n-form-item label="微信账号:" path="weixincode">
        <n-input v-model:value.trim="model.weixincode" maxlength="100" placeholder="新密码"/>
      </n-form-item>
      <h3>银行信息：</h3>
      <n-form-item label="银行开户行:" path="bankaddr">
        <n-input v-model:value.trim="model.bankaddr" maxlength="100" placeholder="新密码"/>
      </n-form-item>
      <n-form-item label="银行正面:" path="bankimg">
        <ksd-uploader v-model="model.bankimg" :data="{'path':'bank','oldname':model.bankimg}" override></ksd-uploader>
      </n-form-item>
      <n-form-item label="银行账号:" path="bankcode">
        <n-input v-model:value.trim="model.bankcode" maxlength="30" placeholder="银行账号"/>
      </n-form-item>
      <div style="display: flex; justify-content: flex-start">
        <n-button round type="primary" @click="handleUpdatePassword">
          收益设置
        </n-button>
      </div>
    </n-form>
  </main>
</template>
<script setup>
const model = ref({
  realname: '',
  telephone: '',
  idcard: '',
  idcardimgf: '',
  idcardimgc: '',
  alipaycode: '',
  weixincode: '',
  bankcode: '',
  bankimg: '',
  bankaddr: ''
})
const rules = ref({})
const formPwdRef = ref({})

const handleLoadUserInfo = async () => {
   const resp = await useGetUserBankInfoApi()
   model.value = resp.data
}

const handleUpdatePassword = () => {

}

defineExpose({
  handleLoadUserInfo
})
</script>
<style scoped>
.ksd-settings h3 {
  font-size: 16px;
  padding: 10px;
  background: #f0f0f0;
  border-radius: 6px;
  width: 100%;
  margin: 15px 0;
}
</style>